<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
          ￥ {{info.todayBillAmount||0}}
          </div>
            
          <div class="card-txt">今日订单金额</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
          {{info.todayBillCount}}
          </div>
          <div class="card-txt">今日成功订单</div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="always">
          <div class="card-num">
          {{info.newUserCount}}
          </div>
          <div class="card-txt">今日新增会员</div>
        </el-card>
      </el-col>
    </el-row>
    <div class="todolist">
      <el-row>
        <el-col :span="12"> 
            <div class="todo-title">
              待处理事务
            </div>
            <div class="dotolist-content">
               <el-row>
                 <el-col :span="7">待发货订单</el-col>
                 <el-col :span="5">{{info.waitSendBillCount}}条</el-col> 
                 <el-col :span="5">会员提现</el-col>
                 <el-col :span="7">0条</el-col> 
               </el-row>
               <el-row>
                 <el-col :span="7">站内信</el-col>
                 <el-col :span="5">0条</el-col> 
                 <el-col :span="5">商品咨询</el-col>
                 <el-col :span="7">{{info.goodsConsultCount}}条</el-col> 
               </el-row>
               <el-row>
                 <el-col :span="7">已达到警戒库存商品</el-col>
                 <el-col :span="17">0条</el-col> 
               </el-row>
            </div>
        </el-col>
        <el-col :span="12">          
            <div class="todo-title">
              商城信息统计
            </div>
            <div class="dotolist-content">
                <el-row>
                  <el-col :span="12">
                      <div class="todo-block">
                        <div class="todo-num">
                        {{info.userCount}}位
                      </div>
                      <div class="todo-txt">
                        会员总数
                      </div>
                  </div>
                    
                  </el-col>
                  <el-col :span="12">
                        <div class="todo-block">
                    <div class="todo-num">
                      {{info.goodsCount}}位
                    </div>
                    <div class="todo-txt">
                      商品总数
                    </div>
                        </div>
                  </el-col> 
                </el-row>
                <el-row>
                  <!-- <el-col :span="12">
                        <div class="todo-block">
                    <div class="todo-num">
                      ￥12.00
                    </div>
                    <div class="todo-txt">
                      预付款总额
                    </div>
                        </div>
                  </el-col> -->
                  <el-col :span="12">
                        <div class="todo-block">
                    <div class="todo-num">
                      ￥12.11
                    </div>
                    <div class="todo-txt">
                      近30天订单金额
                    </div>
                        </div>
                  </el-col> 
                </el-row>
            </div>
        </el-col>
      </el-row>
    </div>
    <div class="short-cuts">
      <div class="short-cuts-title">
        运营快捷入口
      </div>
      <div class="short-cuts-content">
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          添加商品
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          订单列表
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          会员管理
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          会员预存款
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          网站流量
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          满额优惠
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          经典团购
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          限时抢购
        </a>
        <a class="short-cut" href="javascript:void(0)">
          <i class="el-icon-document short-icon"></i>
          零售统计
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import waves from "@/directive/waves"; // 水波纹指令
// var echarts = require("echarts");

export default {
  directives: {
    waves
  },
  mounted() {
     this.$post('/admin/admin/desktop_data').then(data=>{
       this.info = data;
     });
  },
  data() {
    return {
      info:{}
    }
  },
  methods: {

  }
};
</script>
<style>
.card-num {
  font-size: 24px;
  padding-bottom: 10px;
}
.card-txt {
  font-size: 14px;
}
.short-cut {
  text-align: center;
  font-size: 14px;
  margin-bottom: 15px;
  float: left;
  margin-right: 30px;
}
.short-cuts-content {
  overflow: hidden;
  box-sizing: border-box;
}
.short-icon {
  display: block;
  font-size: 30px;
  margin-bottom: 5px;
}
.short-cuts-title {
  padding-bottom: 30px;
}
.todolist {
  padding: 50px 0 10px 0;
}
.todolist .el-row {
  padding-bottom: 15px;
}
.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}
.short-cuts-title {
  font-size: 18px;
  font-weight: bold;
}

.todo-block{
  text-align: center;
  display: inline-block;
  width: 120px;
  margin-bottom: 20px;
}
.todo-txt{
  font-size:14px;
}
.todo-block .todo-num{
  font-size:18px;
  padding-bottom: 10px;
}
</style>
